<template>
    <div class="register">
        <div class="main">
            <div class="register-title"> 注册 </div>

            <div class="user-info">
                <div class="user">
                    <van-field v-model="username" label-width="30px" label="工号" placeholder="工号">
                        <template #label>
                            <img class="user-label" src="@/assets/main/login/username.png" />
                        </template>
                    </van-field>
                </div>
                <!-- <div class="pass">
                    <van-field v-model="email" label-width="30px" label="邮箱" placeholder="邮箱">
                        <template #label>
                            <img class="pass-label" src="@/assets/main/login/password.png" />
                        </template>
                    </van-field>
                </div> -->
                <div class="pass">
                    <van-field v-model="password" type="password" label-width="30px" label="密码" placeholder="密码">
                        <template #label>
                            <img class="pass-label" src="@/assets/main/login/password.png" />
                        </template>
                    </van-field>
                </div>

                <div class="pass">
                    <van-field v-model="password2" type="password" label-width="30px" label="确认密码" placeholder="确认密码"
                        :error="isConfirmPass" :error-message="isConfirmPass ? '两次输入密码不一致' : ''">
                        <template #label>
                            <img class="pass-label" src="@/assets/main/login/password.png" />
                        </template>
                    </van-field>
                </div>
                <!-- <div class="forget">忘记密码?</div> -->
            </div>
            <div class="button-info">
                <div class="user-register-button" @click="registerSubmit">创建</div>
            </div>
            <div class="bottom-info" style="margin-top:100px">
                <span class="bottom-text">
                    已有账户?去 <span @click="goLogin">登录</span>
                </span>
            </div>
        </div>
    </div>
</template>

<script lang="ts">

import { register, login } from '@/apis/login';
import { type LoginUser } from '@/server/index';
import { type RequestCode } from '@/server/base';
import pageBase from '@/views/mixins/page-base';
import { Toast } from 'vant';
export default {
    mixins: [pageBase],
    data() {
        return {
            username: '',
            password: '',
            password2: '',
            email: ''
        }
    },
    computed: {
        isConfirmPass() {
            return this.password !== this.password2;
        }
    },
    methods: {
        registerSubmit() {
            if (!this.username) {
                this.showNotify("工号不能为空！");
                return;
            }
            if (!this.password || this.password.length < 6) {
                this.showNotify("密码不能为空或密码长度不能小于6位！");
                return;
            }
            if (this.password != this.password2) {
                this.showNotify("两次输入密码不一致！");
                return;
            }
            // if (!this.email || !/([a-zA-Z][.]?)*@tf-amd.com$/.test(this.email)) {
            //     this.showNotify("邮件不能为空或格式错误，需以@tf-amd.com结尾！");
            //     return;
            // }
            register({
                carid: this.username,
                pass: this.password,
                // mail: this.email
            }).then((register: RequestCode) => {
                // this.goRouterPage({ name: 'index' }, true);
                // TIP : 自动登录
                Toast.loading({
                    message: '注册成功，正在登录，请稍后....',
                    forbidClick: true,
                });
                login({
                    user: this.username,
                    pass: this.password
                }).then((res: RequestCode) => {
                    //登录成功 用户信息
                    const { pwd, ...user } = res.data as LoginUser;
                    (this as any).$store.commit('user/setUserInfo', user);
                    this.$router.push({ name: 'home' })

                    setTimeout(() => {
                        window.location.reload();
                    }, 500);

                }).catch((error) => {
                    Toast(error.message || error.msg || "登录失败，请稍后再试！");
                });


            }).catch(error => {

            });
        },
        goLogin() {
            this.$router.push({ name: 'login' });
        }
    }
}
</script>

<style lang="scss" scoped>
.register {
    box-sizing: border-box;
    padding: 24px 24px;
    @extend .u-s-n, .over-h;

    .register-title {
        margin-top: 40px;
        /** 文本1 */
        font-size: 36px;
        font-weight: 700;
        color: rgba(91, 103, 202, 1);
    }

    .user-info {
        margin-top: 46px;

        .pass {
            margin-top: 30px;
        }

        .user,
        .pass {
            border-bottom: 1px solid rgba(227, 232, 241, 1);
        }

        .user-label {
            width: 20px;
            height: 20px;
        }

        .pass-label {
            width: 20px;
            height: 20px;
        }

        .forget {
            margin-top: 18px;
            font-size: 12px;
            font-weight: 400;
            color: rgba(91, 103, 202, 1);
            text-align: right;
            vertical-align: top;
        }

    }

    .bottom-info {
        // position: absolute;
        // bottom: 42px;
        text-align: center;
        width: calc(100% - 20px);


        .bottom-text {
            font-size: 14px;
            font-weight: 400;
            color: rgba(44, 64, 110, 1);

            /** 文本2 */
            span {
                font-weight: 700;
            }
        }
    }

    .button-info {
        margin-top: 56px;

        .user-register-button {
            width: 100%;
            text-align: center;
            line-height: 52px;
            height: 52px;
            border-radius: 14px;
            background: rgba(91, 103, 202, 1);
            box-shadow: -3px 7px 13px 0px rgba(241, 247, 255, 1);
            color: #fff;
        }
    }

}
</style>